<template>
	<view class="content mainpadding" v-if="pageShow">
		<view class="mainpadding ffffff radius">
			<view class="flexbetween">
				<view class="text_a color_ling">聯係人</view>
				<view class="text_a color_six">{{orderInfo.user.nickname}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">聯係電話</view>
				<view class="text_a color_six">{{orderInfo.user.mobile}}</view>
			</view>
		</view>
		<view class="flexbetween margin_top paddinglr15">
			<view class="flexleft ">
				<view class="flexleft margin_right2" v-if="orderInfo.order_status==10">
					<view class="text_j hong_text margin_right1">待支付</view>
					<view class="">
						<u-count-down :time="Number(orderInfo.cancel_time)*1000-Number(new Date())"
							format="HH:mm:ss"></u-count-down>
					</view>后自動取消
				</view>
				<view class="text_j huang_text margin_right2" v-if="orderInfo.order_status==20">待入住</view>
				<view class="text_j lv_text margin_right2" v-if="orderInfo.order_status==30">已入住</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==40">已完成</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==50">取消審核中</view>
				<view class="text_j color_san margin_right2" v-if="orderInfo.order_status==60">已取消</view>
				<!-- <u-icon name="arrow-right" color="#999" size="16"></u-icon> -->
			</view>
			<view class="flexright">
				<view class="contactShop" @click="phone(orderInfo.user.mobile)">打電話</view>
				<!-- <view class="listbtnhuang margin_left2" @click="enterChat">聊聊</view> -->
			</view>
		</view>
		<!-- 商品 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexleft">
				<image :src="orderInfo.shoptable.image_text" class="goodsImg margin_right" mode=""></image>
				<view class="flexcolumnbet" style="width: 100%;height: 157rpx;">
					<view class="xiaohei titletext">{{orderInfo.shoptable.num}} <text style="font-size: 26rpx;"
							class="xiaolan  margin_left2"
							v-show="houtel_type==2">{{orderInfo.house_name?orderInfo.house_name:""}}</text></view>
					<view class="flexleft">
						<view class="" v-for="(ite,itedex) in orderInfo.gg_content_text" :key="itedex">
							<text class="xiaohui" style="color: #00a0e9;" v-for="(it,itdex) in ite.content"
								:key="itdex">
								<text class="margin_right1" v-show="it.num!=0">{{it.name}}*{{it.num}}</text>
							</text>
						</view>
					</view>
					<view class="eshiliu bold" v-show="orderInfo.shoptable.des" style="color: #333;">{{orderInfo.shoptable.des}}</view>
					<view class="xiaohei main_size flexleft flex_wrap">
						<view class="margin_right1 guigek"  v-for="(it,ind) in orderInfo.shoptable.fwss_text" :key="it">{{it}}</view>
					</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="xiaohong main_size">${{orderInfo.pay_price}}</view>
						<view class="xiaohui main_size">{{orderInfo.days}}晚 *{{orderInfo.house_num}}閒</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff radius" v-if="orderInfo.choose_house.length">
			<view class="text_a color_ling ">房間信息</view>
			<view class="flexleft">
				<text style="font-size: 26rpx;" class="xiaolan margin_right margin_top"
					v-for="item in orderInfo.choose_house" :key="item.id">{{item.name}}</text>
			</view>
		</view>
		<view class="" v-if="orderInfo.ordergoods.length>0">
			<view class="flexbetween">
				<view class="joininfotitle">
					入住信息
				</view>
				<view class="flexleft xiaohong margin_top1"
					v-if="Number(orderInfo.house_num)!=orderInfo.ordergoods.length">
					尚未登入入住訊息{{Number(orderInfo.house_num)-orderInfo.ordergoods.length}}筆
				</view>
			</view>
			<view class="mainpadding ffffff radius">
				<view class="" v-for="(item,index) in orderInfo.ordergoods" :key="index">
					<view class="flexbetween">
						<view class="text_a color_ling">姓名</view>
						<view class="text_x color_ling">{{item.join_username}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="text_a color_ling">行動電話</view>
						<view class="text_x color_ling">{{item.join_mobile}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 訂單規格 -->
		<view class="margin_top border2 ffffff mainpadding">
			<view class="flexbetween">
				<view class="text_a color_ling">總金額</view>
				<view class="text_x color_orange">${{orderInfo.pay_price}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">訂單編號</view>
				<view class="text_a color_six">{{orderInfo.order_no}}</view>
			</view>

			<view class="flexbetween margin_top">
				<view class="text_a color_ling">入住時間</view>
				<view class="text_a color_six">{{orderInfo.start_date_text}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="text_a color_ling">結束時間</view>
				<view class="huang_text text_a">{{orderInfo.end_date_text}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.order_status!=10 && orderInfo.order_status!=60">
				<view class="text_a color_ling">支付方式</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==0">待支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==1">點數支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==2">多元支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==3">現金支付</view>
				<view class="text_a color_six" v-if="orderInfo.pay_type==4">信用卡</view>
			</view>
			<view class="flexbetween margin_top" v-if="orderInfo.paypz_image_text">
				<view class="xiaohei main_size">支付憑證</view>
				<image class="listleftimg1 radius" :src="orderInfo.paypz_image_text" mode=""
					@click.stop="lbtpriview(0,[orderInfo.paypz_image_text])"></image>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer flex-wrap flexright">
			<view class="listbtnhuang margin_left2" v-show="orderInfo.order_status==10" @click="qrshoukuan(id)">確認收款
			</view>
			<!-- 指定房間不需要選擇房間直接入住 -->
			<view class="listbtnhuang margin_left2"
				v-show="orderInfo.order_status==20 && houtel_type==1  && khrzisShow(orderInfo)"
				@click.stop="zhuli(30,id)">客戶入住</view>
			<!-- 不指定房間 -->
			<view class="listbtnhuang margin_left2"
				v-show="orderInfo.order_status==20 && houtel_type==2  && khrzisShow(orderInfo)" @click.stop="ruzhufj()">
				客戶入住</view>
			<view class="listbtnhuang margin_left2" v-show="orderInfo.order_status==50" @click="zscancelOrder(id)">確定取消
			</view>
			<view class="listbtnhuang margin_left2" v-show="orderInfo.order_status==30" @click="zhuli(40,id)">客戶離店
			</view>
		</view>
		<u-modal :show="rzshow" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇房間入住"
			@cancel="rzshow=false" @confirm="rzConfirm">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fangjian_arr" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				rzshow: false,
				fangjian_arr: [],
				currentvalue: [0],
				id: "", //訂單id
				orderInfo: {},
				pageShow: false,
				showConfirm: false,
				text: "",
				images: [],
				images_text: [],
				currentid: "",
				pzshow: false,
				houtel_type: uni.getStorageSync("houtel_type")
			}
		},
		onLoad(options) {
			this.id = options.id

		},
		onShow() {
			this.getInfo()
		},
		methods: {
			rzConfirm() {
				let house_id = this.fangjian_arr[this.currentvalue[0]].id
				this.rzshow = false
				this.http.request('/api/hotel/clUserOrder', 'GET', {
					id: this.id,
					house_id,
					order_status: 30
				}).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					if (res.code == 1) {
						this.getInfo()
					}
				})
			},
			ruzhufj() {
				this.fangjian_arr = this.orderInfo.house
				this.rzshow = true
			},
			bindChange(e) {
				this.currentvalue = e.detail.value
			},
			qrshoukuan(id) {
				this.http.modal('提示', '是否確認收款', true, (resp) => {
					if (resp) {
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request('/api/hotel/sureGetPrice', 'GET', {
							id,
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							if (res.code == 1) {
								this.getInfo()
							}
						})
					}
				})
			},
			zhuli(val, id) {
				this.http.modal('提示', '請再次確認', true, (resp) => {
					if (resp) {
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request('/api/hotel/clUserOrder', 'GET', {
							id,
							order_status: val
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							if (res.code == 1) {
								this.getInfo()
							}
						})
					}
				})
			},
			zscancelOrder(id) {
				this.http.modal('提示', '是否確認取消', true, (resp) => {
					if (resp) {
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request('/api/hotel/cancelOrder', 'GET', {
							id,
							shop_id: uni.getStorageSync("shop_id"), //店鋪id
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							if (res.code == 1) {
								this.getInfo()
							}
						})
					}
				})
			},
			enterChat() {
				if (this.orderInfo.user.id == uni.getStorageSync('user_id')) {
					httpRequest.toast("自己不能和自己聊天哦！");
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				httpRequest.requestChat('/api/user/addFriends', 'GET', {
					firend_id: this.orderInfo.user.id,
					sendtype: 1,
					user_id: uni.getStorageSync('user_id')
				}).then(res => {
					uni.hideLoading()
					let data = {
						firend_id: this.orderInfo.user.id,
						friend_name: this.orderInfo.user.nickname,
						firend_avatar_text: this.orderInfo.user.avatar_text
					}
					uni.navigateTo({
						url: "/pages/message/chat?msg=" + encodeURIComponent(JSON.stringify(data))
					})
				})
			},
			getInfo() { //訂單詳情
				let _this = this
				this.http.request('/api/hotel/detail', 'GET', {
					id: this.id,
				}).then(res => {
					if (res.code == 1) {
						this.orderInfo = res.data
						this.pageShow = true
					} else {
						this.http.toast(res.msg)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-transition {
		z-index: 10 !important;
	}

	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content {
		padding-bottom: 150rpx;
	}

	.shopImg {
		width: 26.62rpx;
		height: 24rpx;
		min-width: 26.62rpx;
	}

	.contactShop {
		width: 132rpx;
		height: 51rpx;
		line-height: 51rpx;
		text-align: center;
		background: rgba(255, 196, 0, 0.1);
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		border: 1rpx solid #FFB800;
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.goodsImg {
		width: 157rpx;
		height: 157rpx;
		min-width: 157rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
		}

		.shipment {
			// width: 71rpx;
			// height: 30rpx;
			// line-height: 30rpx;
			padding: 4rpx;
			box-sizing: border-box;
			text-align: center;
			background: #13C463;
			border-radius: 14rpx 0rpx 14rpx 0rpx;
			font-size: 18rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.price {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}

	.greyBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.popupBox {
		width: 660rpx;
		padding: 50rpx 50rpx 0;
		box-sizing: border-box;
	}

	::v-deep.u-steps-item__content {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 50rpx;
		flex: 1;
	}

	::v-deep.u-text:nth-child(2) {
		justify-content: flex-end !important;
	}

	.textareas {
		width: 100%;
		box-sizing: border-box;
		height: 203rpx;
		padding: 30rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EFEFEF;
	}

	.joininfotitle {
		padding: 10rpx 10rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.codeImage {

		justify-content: center;
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
	}

	.codeImageItem {
		width: 200rpx;
		height: 200rpx;

	}

	.joininfoitem {
		margin-bottom: 10rpx;
	}
</style>